<template>
  <div>
    <!--  新增  -->
    <a-modal v-if="title=='新增'" :visible="modalVisible" :title="title" @ok="handleCreate(data.actionText)" @cancel="handleCancel" cancelText="取消" okText="新增" :confirmLoading="confirmCreateLoading">
      <div v-if="data.createData">
        <!--  输入    -->
        <a-row :gutter="24">
          <a-form :form="forms" :label-col="{ span: 4,offset: 1 }" :wrapper-col="{ span: 17,offset: 1 }">
            <template v-for="(item,index) in data.createData">
              <a-col :span="24">
                <a-form-item :label="item.label">
                  <template v-if="item.label == '到期时间'">
                    <a-date-picker @change="onDateChange" :format="dateFormat" v-decorator="[item.name,validatorRules.common]"/>
                  </template>
                  <template v-else-if="item.label == '密码'">
                    <a-input-password :placeholder="`请输入${item.label}`" :ref="item.name" allowClear  v-decorator="[item.name,validatorRules.common]"/>
                  </template>
                  <template v-else-if="item.label == '等级'">
                    <a-select style="width: 200px" @change="handleChangeLevel" placeholder="请选择" v-decorator="[item.name,{ rules: [{ required: true, message: '请选择等级' }] },]">
                      <a-select-option v-for="(Item,Index) in userLevelList" :value="Item.name" :key="(Item + 9).toString(36) + i">
                        {{ Item.name }}
                      </a-select-option>
                    </a-select>
                  </template>
                  <template v-else>
                    <a-input :placeholder="`请输入${item.label}`" allowClear :ref="item.name" v-decorator="[item.name,validatorRules.common]"/>
                  </template>
                </a-form-item>
              </a-col>
            </template>
          </a-form>
        </a-row>
      </div>
    </a-modal>
    <!--  编辑  -->
    <a-modal v-else-if="title=='管理设置'" :visible="modalVisible" :title="title" @ok="handleEdit(data.actionText)" @cancel="handleCancel" cancelText="取消" okText="提交" :confirmLoading="confirmCreateLoading">
      <div v-if="data.editData">
        <!--  输入    -->
        <a-row :gutter="24">
          <a-form :form="form" :label-col="{ span: 4,offset: 1 }" :wrapper-col="{ span: 17,offset: 1 }">
            <template v-for="(item,index) in data.editData">
              <a-col :span="24">
                <a-form-item :label="item.label">
                  <template v-if="item.label == '等级'">
                    <a-select  @change="handleChangeLevel" placeholder="请选择" v-decorator="[item.name,{initialValue: item.content}]">
                      <a-select-option v-for="(Item,Index) in userLevelList" :value="Item.name" :key="(Item + 9).toString(36) + i">
                        {{ Item.name }}
                      </a-select-option>
                    </a-select>
                  </template>
                  <template v-else-if="item.label == '新密码'">
                    <a-input-password :placeholder="`请输入${item.label}`" :ref="item.name" allowClear  v-decorator="[item.name]"/>
                  </template>
                  <template v-else-if="item.label == '到期时间'">
                    <a-date-picker placeholder="请选择时间" :value="moment(item.content)" @change="onDateChange" :format="dateFormat" :ref="item.name" v-decorator="[item.name,  {initialValue: item.content}]"/>
                  </template>
                  <template v-else>
                    <a-input :placeholder="`请输入${item.label}`" :rows="3" allowClear :ref="item.name"  v-decorator="[item.name,  {initialValue: item.content}]"/>
                  </template>
                </a-form-item>
              </a-col>
            </template>
          </a-form>
        </a-row>
      </div>
    </a-modal>
    <!--  发送邮件  -->
    <a-modal v-else-if="title=='发送邮件'" :visible="modalVisible" :title="title" @ok="handleCreate(data.actionText)" @cancel="handleCancel" cancelText="取消" okText="发送邮件" :confirmLoading="confirmCreateLoading">
      <div v-if="data.sendData">
        <!--  输入    -->
        <a-row :gutter="24">
          <a-form :form="forms" :label-col="{ span: 4,offset: 1 }" :wrapper-col="{ span: 17,offset: 1 }">
            <div class="contain-tag">
              <template v-for="(item,index) in data.emailUserList">
                <a-tag color="#1890FF" class="tag-class">{{item}}</a-tag>
              </template>
            </div>
            <template v-for="(item,index) in data.sendData">
              <a-col :span="24">
                <a-form-item :label="item.label">
                  <template v-if="item.label == '邮件内容'">
                    <a-textarea :auto-size="{ minRows: 3, maxRows: 8 }" :placeholder="`请输入${item.label}`" allowClear :ref="item.name" v-decorator="[item.name,validatorRules.common]"/>
                  </template>
                  <template v-else>
                    <a-input :placeholder="`请输入${item.label}`" allowClear :ref="item.name" v-decorator="[item.name,validatorRules.common]"/>
                  </template>
                </a-form-item>
              </a-col>
            </template>
          </a-form>
        </a-row>
      </div>
    </a-modal>
  </div>
</template>

<script>
  import {addUser, userList,updatePwd,sendEmail} from "../../api";
  import moment from 'moment';

  export default {
    name: "ActionModal",
    props: ['data','modalVisible','title','total'],
    data(){
      return {
        form: this.$form.createForm(this, {name: 'coordinated'}),   //编辑表单
        forms: this.$form.createForm(this, {name: 'create'}),   //新增表单
        loading: false,
        moment,
        imageUrl: '',
      //  username: window.localStorage.getItem('group'),
        limitDate: '',     //到期时间
        dateFormat: 'yyyy-MM-DD',
        confirmCreateLoading: false,
        validatorRules: {
          common: {
            rules: [
              {
                required: true,
                message: '该字段不能为空，请重新输入'
              }
            ]
          },
        },
        //视频类型
        userLevelList: [{
          name: '授权管理员',
          userLevel: 0
        },{
          name: '普通用户',
          userLevel: 1
        }],
      }
    },
    created() {

    },
    methods: {
      //取消按钮事件
      handleCancel(e) {
        this.forms.resetFields();
        this.$emit("update:modalVisible",false)
      },
      //新增确定事件
      handleCreate(text) {
        let data;
        // 拉取表单数据的方法
        this.forms.validateFields((err, values) => {
          if (!err) {
            data = this.forms.getFieldsValue()   //获取表单填写选择数据
            if (data){
              //新增用户
              if (text == "新增用户"){
                data.limit = moment(values.limit).format('YYYY-MM-DD')
                addUser(data)
                  .then((res) => {
                    if (res.status == 200){
                      this.$message.success(res.msg);
                      //重新刷新用户列表
                      this.getUserList();
                    }else{
                      this.$message.error(res.msg);
                    }
                    this.form.resetFields();
                    this.$emit("update:modalVisible",false);
                  })
                  .catch((err) => {
                    this.$message.error("添加失败，请联系系统管理员！");
                  })
                this.confirmCreateLoading = false
              }
              //发送邮件
              else if(text == "发送邮件"){
                data.emailList = this.data.emailList
                sendEmail(data)
                  .then((res) => {
                    if (res.status == 200){
                      this.$message.success(res.msg);
                    }else{
                      this.$message.error(res.msg);
                    }
                    this.form.resetFields();
                    this.data.emailList = []
                    this.$emit("update:modalVisible",false);
                  })
                  .catch((err) => {
                    this.$message.error("发送邮件失败，请联系系统管理员！");
                  })
                this.confirmCreateLoading = false
              }
            }
          }
        })
      },
      //日期变化事件
      onDateChange(time, timeString){
        this.limitDate = timeString
      },
      //用户等级下拉框变化事件
      handleChangeLevel(value){
        console.log(`selected ${value}`);
      },
      //编辑确定事件
      handleEdit(text){
        let data;
        // 拉取表单数据的方法
        this.form.validateFields((err, values) => {
          if (!err) {
            data = this.form.getFieldsValue()   //获取表单填写选择数据
            data.id = this.data.value.id
            if (data){
              //编辑视频
              if (text == "管理设置"){
                data.limit = moment(values.limit).format('YYYY-MM-DD')
                updatePwd(data)
                  .then((res) => {
                    if (res.status == 200){
                      this.$message.success("修改用户成功！");
                      //重新刷新视频列表
                      this.getUserList();
                    }else{
                      this.$message.error(res.msg);
                    }
                    this.forms.resetFields();
                    this.$emit("update:modalVisible",false);
                  })
                  this.confirmCreateLoading = false
              }
            }
          }
        })
      },
      //用户分页列表渲染（全部）
      getUserList(){
        let params = {
          group: window.localStorage.getItem('group')
        }
        userList(params)
          .then((res) => {
            if (res.status == 200){
              this.data = res.users
              //更新父级组件样式，重新渲染
              this.$emit("update:dataList",res.users);
              console.log("res userList", res)
            }
          })
      },
    },
  }
</script>

<style scoped>
  .contain-pic{
    display: flex;
    justify-content: space-between;
    align-content: center;
    align-items: center;
  }
  .margin-left{
    margin-left: -11px;
  }
  .pic-info{
    font-size: 12px;
    color: #999999;
  }
  .label-info{
    font-size: 12px;
    color: #999999;
  }
  .action{
    background-color: rgba(176,234,248,0.3);
    margin-top: 10px;
    padding: 15px;
    box-sizing: border-box;
  }
  .contain-tag{
    border: 1px solid #1890FF;
    border-radius: 6px;
    padding: 5px;
    margin: 0px 30px 10px 30px;
  }
  .tag-class{
    margin-bottom: 5px;
  }

</style>